<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="230" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="item1">
                <div class="key">名称:</div>
                <el-input v-model.lazy="name" :disabled="true"  />
            </div>
            <div class="item1">
                <div class="key">最低高程:</div>
                <el-input v-model.lazy="minh" :disabled="true" type="number" />
            </div>
            <div class="item1">
                <div class="key">最高高程:</div>
                <el-input v-model.lazy="maxh" :disabled="true" type="number" />
            </div>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import {
    onMounted,
    ref,
    onBeforeUnmount,
    computed,
    watch,
    shallowRef,
} from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { processNum } from "@/scripts/utils";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};

const uiLeft = document.body.clientWidth - 10 - 350;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const modelser2Manager = getProjectManager().modelser2Manager;
const monomerEdit = modelser2Manager.monomerEdit as any;

const monomerInfoRef = toVR<any>(d, [monomerEdit, "monomerInfo"]);

const name = ref('')
const minh = ref('')
const maxh = ref('')


watch(monomerInfoRef, (newValue) => {
    if(!monomerInfoRef.value || !Object.keys(monomerInfoRef.value).length){
        name.value = ''
        minh.value = ''
        maxh.value = ''
    }else{
        name.value = monomerInfoRef.value.name
        minh.value = processNum(monomerInfoRef.value.minh)
        maxh.value = processNum(monomerInfoRef.value.maxh)
    }
})


onMounted(() => {
    monomerEdit.init();
});
onBeforeUnmount(() => {
    monomerEdit.clear();
});
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center-table {
    width: 100%;
}

.edit {
    display: flex;
    justify-content: flex-end;
}

.item1 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
    margin-bottom: 8px;
}
</style>
